import L from 'leaflet';
import debounce from 'lodash/debounce';
import { akProxy, serversProxy } from '.';

export const createMap = ({
    center,
    zoom,
    attributionControl,
    zoomControl,
    minZoom,
    maxZoom
} = {
    center: CHINA_GEO_CENTER,
    zoom: 4,
    maxZoom: 18,
    minZoom: 4,
    attributionControl: false,
    crs: L.CRS.EPSG3857,
    zoomControl: false
}) => (
    L.map("map", {
        center,
        maxZoom,
        minZoom,
        zoom,
        attributionControl,
        crs: L.CRS.EPSG3857,
        zoomControl
      })
)

export const createBackgroundTileLayerUrl = () => `http://t${serversProxy.server}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${akProxy.ak}`
export const createMarkTileLayerUrl = () => `http://t${serversProxy.server}.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${akProxy.ak}`

export const CHINA_GEO_CENTER = [34.212372, 108.984375];

export const POS_JYDS = [
    [45.763968, 126.591629],
    [45.764494, 126.592562],
    [45.764365, 126.59282],
    [45.763861, 126.592251],
];

export const POS_MARKERS = [
    [45.767418, 126.602261],
    [45.760053, 126.605566],
];

export const getLatlngByPopUp = map => {
      map.on('click', ({latlng}) => {
        L.popup()
        .setLatLng(latlng)
        .setContent(latlng.toString())
        .openOn(map);
      });
}

export const createMarkerIcon = () => (
    L.icon({
        // iconUrl: '/1.png',
        iconUrl: 'http://skybjf.github.io/img/article/insert/20151016/yvdi.gif',
        iconSize: [100, 100],
    })
)

export const createMarker = (map, [lat, lng], icon = createMarkerIcon()) => (
    L.marker([lat, lng], {
        icon
    }).addTo(map)
)

export const createMarkerBatch = (map, latlngs, icon) => (
    latlngs.map(([lat, lng]) => createMarker(map, [lat, lng], icon))
)


export const onMakerHover = (obj, callBack) => {
    obj.on('mouseover', debounce(callBack, 0))
}

export const onMakerOut = (obj, callBack) => {
    obj.on('mouseout', debounce(callBack, 0))
}

export const onMakerHoverBatch = (objs, callBack) => {
    objs.forEach(obj => {
        onMakerHover(obj, callBack)
    });
}

export const onMakerOutBatch = (objs, callBack) => {
    objs.forEach(obj => {
        onMakerOut(obj, callBack)
    });
}


